<template>
    <div class="ele-body">
        <el-card shadow="never">

            <el-form :model="table.where" label-width="85px" class="ele-form-search">
                <el-row :gutter="5">

                    <el-col :md="5" :sm="12">
                        <el-form-item label="访客姓名：">
                            <el-input v-model="table.where.username" placeholder="请输入姓名搜索"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :md="5" :sm="12">
                        <el-form-item label="访客电话：">
                            <el-input v-model="table.where.phone" placeholder="请输入电话搜索"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :md="6" :sm="12">
                        <el-form-item label="来访时间：">
                            <el-date-picker
                                v-model="table.where.datetime"
                                type="datetimerange"
                                range-separator="~"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                size="small" 
                                >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>

                </el-row>

                <el-row :gutter="5">
                    <el-col :md="5" :sm="12">
                        <el-form-item label="被访人姓名：" label-width="100px">
                            <el-input v-model="table.where.to_username" placeholder="请输入被访人姓名搜索"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :md="5" :sm="12">
                        <el-form-item label="被访人电话：" label-width="100px">
                            <el-input v-model="table.where.to_phone" placeholder="请输入被访人电话搜索"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :md="4" :sm="12">
                        <el-form-item label="审核状态：">
                            <el-select v-model="table.where.status" placeholder="全部" size="small" clearable>
                                <el-option key="1" label="未审核" value="1"></el-option>
                                <el-option key="2" label="审核通过" value="2"></el-option>
                                <el-option key="3" label="拒绝" value="3"></el-option>
                                <el-option key="4" label="已过期" value="4"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :md="4" :sm="12">
                        <el-form-item>
                            <div class="search-btns">
                                <el-button 
                                    size="small" 
                                    type="primary" 
                                    @click="filter"
                                    icon="el-icon-search"
                                    class="ele-btn-icon">查询
                                </el-button>
                                <el-button 
                                    size="small" 
                                    type="default" 
                                    @click="removeRow"
                                    icon="el-icon-delete-solid"
                                    class="ele-btn-icon">删除
                                </el-button>
                            </div>
                        </el-form-item>
                    </el-col>

                </el-row>

            </el-form>

            <ele-data-table ref="table" :config="table" height="calc(100vh - 265px)">

                <template slot-scope="{index}">

                    <el-table-column type="selection" width="45" align="center" fixed="left"/>
                    <el-table-column type="index" :index="index" label="序号" width="60" align="center" fixed="left" show-overflow-tooltip/>

                    <el-table-column label="照片" min-width="80" align="center">
                        <template slot-scope="{row}">
                            <el-avatar shape="square" :size="70" :src="row.imgpath"/>
                        </template>
                    </el-table-column>

                    <el-table-column label="人脸检测" min-width="100" sortable="custom" align="center">
                        <template slot-scope="{row}">
                            <el-tag :type="['success', 'danger'][row.face_check-1]" size="mini">{{ ['检测成功', '检测失败'][row.face_check-1] }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="person_name" label="访客姓名" show-overflow-tooltip align="center" min-width="130"/>
                    <el-table-column prop="phone_number" label="访客电话" show-overflow-tooltip align="center" min-width="120"/>
                    <el-table-column prop="person_num" label="随行人数" show-overflow-tooltip align="center" min-width="120"/>

                    <el-table-column label="来访时间" sortable="custom" show-overflow-tooltip align="center" min-width="160">
                        <template slot-scope="{row}">{{ row.create_time }}</template>
                    </el-table-column>

                    <el-table-column prop="visitorname" label="被访人姓名" show-overflow-tooltip align="center" min-width="130"/>
                    <el-table-column prop="visitornumbers" label="被访人电话" show-overflow-tooltip align="center" min-width="120"/>
                    <el-table-column prop="cause" label="访客事由" show-overflow-tooltip align="center" min-width="120"/>

                    <el-table-column label="登记时间" sortable="custom" show-overflow-tooltip align="center" min-width="160">
                        <template slot-scope="{row}">{{ row.update_time }}</template>
                    </el-table-column>

                    <el-table-column label="审核状态" min-width="100" sortable="custom" align="center">
                        <template slot-scope="{row}">
                            <el-tag :type="['default', 'success', 'danger', 'warning'][row.status-1]" size="mini">{{ ['未审核', '审核通过', '拒绝', '已过期'][row.status-1] }}</el-tag>
                        </template>
                    </el-table-column>

                </template>

            </ele-data-table>

        </el-card>
    </div>
</template>

<script>


export default {
    name: "Visitor",

    data() {
        let where = {
            datetime: ['2021-08-10 12:00:00', '2021-08-11 08:00:00']
        }
        return {
            choose: [],  // 表格选中数据
            table: {
                url: '/api/admin/access/visitor', 
                method: 'post',
                where: where
            },
        };
    },

    mounted() {},

    methods: {
        
        removeRow() {

        },

        filter() {
            this.$refs.table.reload({ page: 1 })
        }
    },
};
</script>

<style>
.datetime-sel, .search-btns {
    margin: 0 10px;
    float: left;
}
.inline-sel {
    float: left;
    width: 150px;
}
.w50 {
    width: 100px;
    margin-right: 10px;
}
</style>
